@extends('layouts/app')

@section('content')
    <div class="booking">
        <div class="demos-content-padded tables">
            <h3>桌子</h3>
            <div class="rooms-content">
                <div class="btn active">
                    <p>包间</p>
                    <p class="f20">20(人)</p>
                </div>
            </div>
        </div>
        <div class="demos-content-padded rooms">
            <h3>包间</h3>
            <div class="rooms-content">
                <div class="btn active">
                    <p>包间</p>
                    <p class="f20">20(人)</p>
                </div>
            </div>
        </div>
        <div class="demos-content-padded booths">
            <h3>卡座</h3>
            <div class="rooms-content">
                <div class="btn active">
                    <p>包间</p>
                    <p class="f20">20(人)</p>
                </div>
            </div>
        </div>

        {{--<div class="demos-content-padded users">--}}
            {{--<h3>个人信息</h3>--}}
            {{--<div class="weui-cells weui-cells_form">--}}
                {{--<div class="weui-cell">--}}
                    {{--<div class="weui-cell__hd"><label class="weui-label">姓名</label></div>--}}
                    {{--<div class="weui-cell__bd">--}}
                        {{--<input class="weui-input" type="text" placeholder="姓名">--}}
                    {{--</div>--}}
                {{--</div>--}}
                {{--<div class="weui-cell">--}}
                    {{--<div class="weui-cell__hd"><label class="weui-label">手机号</label></div>--}}
                    {{--<div class="weui-cell__bd">--}}
                        {{--<input class="weui-input" type="number" pattern="[0-9]*" placeholder="手机号">--}}
                    {{--</div>--}}
                {{--</div>--}}
            {{--</div>--}}
        {{--</div>--}}

        <div class="check">
            <button class="weui-btn weui-btn_primary" onclick="addOrder()">确认点菜</button>
        </div>
    </div>

    <script>
        // 获取商家ID
        var shopsId = getRequest().shopsId,
            arriveTime = getRequest().arriveTime;
        console.log("arriveTime", arriveTime);
        // 根据ID拿到对应的数据
        function getRoomsData (shopsId) {
            // 拿到缓存的数据
            var rooms = Storage.get("rooms");

            if (rooms.status) {
                rooms = JSON.parse(rooms.value);
                console.log("rooms", rooms);
                var data = rooms[shopsId];
            }
            return data;
        }
        var data = getRoomsData(shopsId);
        playData(data); // 数据分类

        // 数据分类
        function playData (data) {
            var rooms = [], // 房间
                tables = [], // 桌子
                booths = [];  // 卡座

            for (var i = 0, len = data.length; i < len; i++) {
                // 如果是房间
                if (data[i].type == 0) {
                    tables.push(data[i]);
                } else if (data[i].type == 1) {
                    rooms.push(data[i]);
                } else {
                    booths.push(data[i]);
                }
            }

            // 渲染数据
            createHtml(rooms, ".rooms");
            createHtml(tables, ".tables");
            createHtml(booths, ".booths");
        }

        // 渲染数据
        {{--@ param data 数据--}}
        {{--@ param ele html容器--}}
        function createHtml(data, ele) {
            console.log("data1", data);
            console.log("ele", ele);
            var ldata = {};
            ldata['type'] = 'roomsList';
            ldata['element'] = ele;
            ldata['data'] = data;

            console.log("ldata", ldata);
            A.init(ldata);
        }

        // 点击房子桌子事件
        $(".booking").on("click", "div.btn", function () {
            var has = $(this).hasClass("active");

            // 点击一次是选择，再点一次就取消
            if (has) {
                $(this).removeClass("active");
            } else {
                $(this).addClass("active");
            }
        });

        // 去点菜
        function addOrder () {
            var btns = $(".booking .btn.active"),
                len = btns.length;
            console.log("len", len);

            // 拿到所有选择的项目
            var deskRoom = [];
            btns.each(function (index, value) {
                // 拿到ID
                var id = $(this).attr("data-id"),
                    type = $(this).attr("data-type"),
                    name = $(this).children("p.f30").text();

                console.log("name", name);

//                if (index < len - 1) {
//                    deskRoom += id + "|";
//                } else {
//                    deskRoom += id;
//                }
                deskRoom.push({
                    id: id,
                    type: type,
                    name: name
                });
                console.log("id", id);
            });
            Storage.set("deskRoom", deskRoom);

            console.log("deskRoom", deskRoom);

            location.href = "/mobile/takeout-menu?id=" + shopsId + "&type=book";

        }
    </script>
@endsection


@extends('layouts/footer')
